<template>
  <div
    class="k-btn-wrap k-letters"
    :class="'wrap-' + boardType"
  >
    <transition-group
      name="fade"
    >
      <div
        v-show="model === 'text'"
        key="text"
        class="clear-fix k-btn-box"
      >
        <ul class="fl num-ul">
          <li
            v-for="(row, idx) in cp_ordinary"
            :key="idx"
            class="clear-fix k-row"
            :class="{['k-row-' + cp_ordinary.length]: 1}"
          >
            <template v-for="(btn, i) in row">
              <span
                v-if="btn.expect === 'delete'"
                :key="i"
                class="fl k-btn"
                :class="['k-' + btn.type, 'k-btn-' + row.length, {active: active === `${idx}_${i}`}]"
                @touchstart.stop="deleteClick($event, btn, `${idx}_${i}`)"
                @touchend.stop="pressUp"
                @mousedown.stop="deleteClick($event, btn, `${idx}_${i}`)"
                @mouseup.stop="pressUp"
                @click.stop="pressClick($event, btn)"
              />
              <span
                v-else
                :key="i"
                class="fl k-btn"
                :class="['k-btn-' + row.length, 'k-' + btn.type, {active: active === `${idx}_${i}`, disable: disableBtn.includes(btn.expect)}]"
                @touchstart.stop="active = `${idx}_${i}`"
                @touchend.stop="btnClick($event, btn)"
                @mousedown.stop="!mobile && (active = `${idx}_${i}`)"
                @mouseup.stop="btnClick($event, btn)"
              >{{ btn.view || ((isUpper && btn.type === 'default') && btn.text.toUpperCase() || btn.text) }}</span>
            </template>
          </li>
        </ul>
      </div>
    </transition-group>
  </div>
</template>

<script>
/******************/
/******************/
// region    //import
import { KeepPress } from './index';
import { _implant } from './utils';

// endregion

/******************/
/******************/
// region    //initialize

// endregion

/******************/
/******************/
// region    //export

export default {
    name: 'TheLetter',
    props: {
        boardData: {
            type: Object,
            required: true,
        },
        mobile: {
            type: Boolean,
            default: true,
        },
        boardType: {
            type: String,
            default: '',
        },
        symbolsText: {
            type: Object,
            default () {
                return {};
            },
        },
        payload: {
            type: Object,
            default () {
                return {};
            },
        },
        disableBtn: {
            type: Array,
            default: () => {
                return [];
            },
        },
    },
    data () {
        let press = new KeepPress();
        return {
            isUpper: false, // 是否大写
            model: 'text',
            pressDown: press.down(($event, data) => {
                this.active = '';
                this.$emit('keep-press', $event, data);
            }, 1000),
            pressUp: press.up((e) => {
                this.active = '';
                this.$emit('btn-click', e, {
                    'text': '删除',
                    'type': 'symbol delete',
                    'expect': 'delete',
                });
            }),
            pressClick: press.click(($event, data) => {
                this.active = '';
                this.$emit('btn-click', $event, data);
            }),
            active: '',
        };
    },
    computed: {
        cp_ordinary () {
            let { symbols, keysText: { ordinary, defaultSymbol } } = this.boardData;
            let origin = ordinary[3];
            let lastArr = null;
            let defArr = Object.entries(defaultSymbol).map(([k, itm]) => Object.assign({}, itm, { text: k }));
            let sym = symbols.length > 0 && symbols[0].items || defArr;
            if (this.boardType === 'spell') {
                lastArr = origin;
            } else if (symbols.length > 1 || sym.length > 4) {
                lastArr = _implant([origin, sym], [
                    {
                        index: 1,
                        count: 2,
                    },
                    {
                        index: 0,
                        count: 1,
                    },
                    {
                        index: 1,
                        count: 1,
                    },
                    {
                        index: 0,
                        count: 1,
                    },
                ], Object.entries(defaultSymbol).map(([k, itm]) => Object.assign({}, itm, { text: k })));
            } else {
                lastArr = [...sym.slice(0, 3), origin[0], ...sym.slice(3, 4), origin[1]];
            }

            return [...ordinary.slice(0, 3), lastArr];
        },
        cp_right () {
            return this.boardData.keysText.large && {
                width: '20%',
            };
        },
        cp_left () {
            return this.boardData.keysText.large && {
                width: '80%',
            };
        },
    },
    watch: {
        boardData: {
            deep: true,
            immediate: true,
            handler () {
                this.isUpper = false;
            },
        },
    },
    mounted,
    methods: {
        btnClick (e, data) {
            let { expect, type, text } = data;
            let isUpper = null;
            this.active = '';
            if (expect === 'caseSwitch') {
                this.isUpper = !this.isUpper;
            }
            ({ isUpper } = this);
            if (isUpper && type === 'default') {
                text = text.toUpperCase();
            }

            this.$emit('btn-click', e, Object.assign({}, data, {
                text,
                isUpper: this.isUpper,
            }));
        },
        deleteClick ($event, btn, cls) {
            this.active = cls;
            this.pressDown($event, btn);
        },
    },
};
// endregion

/******************/
/******************/
// region    //function

/**
   *组件挂载成功执行函数
   */
function mounted () {
}

// endregion

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">

  @media screen and (max-width: 400px) {

    .wrap-spell {
      .spell {
        &:before {
          width: 4px;
          height: 4px;
        }
      }
    }
  }

  .num-ul, .sym-pad {
    height: 100%;
    width: 100%;
  }

  .k-btn-wrap {
    position: relative;
  }

  .sym-aside, .k-btn-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 10px;
  }

  .k-btn-box {
    z-index: 0;
  }
</style>
